// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import router from './router' 的核心作用是：从 ./router.js (或 ./router/index.js) 文件中导入其默认导出的内容，
//并将其命名为 router 在当前文件中使用。


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

/**
 router,
 作用：将路由功能注入到整个 Vue 应用中。
 值：这是一个 ES6 对象属性简写，等同于 router: router。
 这里的 router 是你之前通过 new VueRouter({...}) 创建的路由实例。
 工作原理：通过向根实例注入 router，你就可以在应用的任何子组件中通过 this.$router 访问路由实例，
 或通过 this.$route 访问当前路由信息。
 同时，<router-link> 和 <router-view> 组件也才能在模板中正常工作。
 在 Vue 3 中的对应物：app.use(router)。
 c. components: { App }
 作用：在当前 Vue 实例的作用域中注册组件。
 值：一个对象，键是组件的名称，值是组件的定义。{ App } 同样是 ES6 简写，等同于 { App: App }。
 这里的 App 是你从 App.vue 文件中导入的根组件。
 工作原理：注册后，你才能在当前实例的 template 中使用 <App/> 这个自定义标签。
 在 Vue 3 中的对应物：createApp(App)（在创建应用时直接传入根组件）。
 d. template: '<App/>'
 作用：定义 Vue 实例的模板 (Template)。
 值：一个 HTML 字符串。
 工作原理：Vue 编译器会解析这个模板字符串。它发现了 <App/> 标签，
 然后会找到 components 选项中注册的 App 组件，并将其渲染出来。
 最终，App 组件的模板内容会替换掉挂载点 #app 元素的内容。
 在 Vue 3 中的对应物：createApp(App)（根组件的模板就是应用的起点）
 * **/
